'use client'

/**
 * @author shaosong
 * @description
 */
import {
  Button,
  Popover,
  PopoverContent,
  PopoverTrigger
} from '@nextui-org/react'
import React from 'react'
import SolidCaptcha from '.'
import { message } from 'antd'

export class PopoverCaptchaProps {
  children: React.ReactNode
}

const PopoverCaptcha: React.FC<PopoverCaptchaProps> = props => {
  const [isOpen, setIsOpen] = React.useState(false)
  const onSuccess = () => {
    message.success('验证成功')
    const time = setTimeout(() => {
      setIsOpen(false)
      clearTimeout(time)
    }, 1000)
  }

  return React.useMemo(
    () => (
      <Popover
        isOpen={isOpen}
        placement="top"
        onOpenChange={open => setIsOpen(open)}
      >
        <PopoverTrigger>
          {props?.children ? props?.children : <Button>滑动验证</Button>}
        </PopoverTrigger>
        <PopoverContent>
          <div className="p-2">
            <SolidCaptcha
              onSuccess={onSuccess}
              onError={() => message.error('验证失败')}
            />
          </div>
        </PopoverContent>
      </Popover>
    ),
    [isOpen]
  )
}

export default PopoverCaptcha
